<template>
  <div>
    <div class="shoppingConfirm">
      <div class="banner">
        <div class="content">
          <div @click="goBack"><span class="el-icon-arrow-left"></span>返回</div>
          <div>确认订单</div>
          <div>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
        </div>
      </div>
      <hr>
      <shopAddress :isAddAddress="true" @handleSelect="handleSelect" :isCheckSelect="false" :enableEdit="false" :isSelection="true" :isAdd="false" :isOperates="false" />
      <div style="border:1px solid #EBEEF5;margin-top: 20px;"/>
      <div class="confirm"></div>
      <tableList 
        :columns="tableCols"
        :data="tableData"
        :isCheckSelect="false"
        ref="list" />
      <div class="buy">
        <div class="toPay" @click="pay">去付款</div>
        <div>共 <span style="color:red">{{payInfo.nums}}</span> 件商品，总计 <span style="color: red;font-weight: bold;font-size: 18px;">{{payInfo.money}}</span> 元</div>
      </div>
    </div>
  </div>
</template>

<script>
import shopAddress from "@/views/index/user/shopAddress";
import tableList from "@/components/index/tableList";
import { payMoney } from "@/js/api/home";
export default {
  name:'shoppingConfirm',
  components:{
    shopAddress,
    tableList,
  },
  data(){
    return{
      tableCols: [
        { label: "商品名称", prop: "name",sortable: true,edit:false},
        { label: "数量", prop: "num", sortable: true },
        { label: "单价（元）", prop: "price",edit:false,},
        { label: "金额（元）", prop: "money", sortable: true,edit:false,
          render(h,params) {
            return h('span',{
              style:{
                color:'red',
                'font-weight': 'bold',
                'font-size':'18px'
              },
              domProps: {
                innerHTML : '¥'+parseFloat(params.row.num)*parseFloat(params.row.price)
              }
            },params)
          }, 
        },
      ],
      tableData:[],
      operates: {
        width: 100,
        list: [
          {
            id: "1",
            label: "删除",
            type: "text",
            show: true,
            disabled: false,
            size: "small",
            method: (index, row) => {
              this.deleteData([row.id])
            },
          },
        ],
      },
      selectRow:[]
    }
  },
  computed:{
    payInfo:function(){
      let money = 0;
      for(let i of this.tableData){
        money += parseInt(i.price)*parseInt(i.num)
      }
      let obj = {
        nums:this.tableData.length,
        money:money
      }
      return obj
    },
  },
  created(){
    this.loadList()
  },
  methods:{
    handleSelect(val){
      this.selectRow = val
    },
    loadList(){
      let params = this.$route.query
      if(params.action && params.action == 1){
        let shopInfo = JSON.parse(params.shopInfo)
        this.tableData = [
          {
            id:0,
            name:shopInfo.name,
            num:shopInfo.num,
            price:shopInfo.price,
            shopId:shopInfo.shopId,
            money:parseInt(shopInfo.price)*parseInt(shopInfo.num)
          }
        ]
      }else{
        let list = this.$route.query
        if(list.action==2){
          let shopLists = JSON.parse(list.obj)
          for(let i in shopLists){
            this.tableData.push({
              id:i,
              carId:shopLists[i].carId,
              shopId:shopLists[i].shopId,
              name:shopLists[i].goods_name,
              num:shopLists[i].nums,
              price:shopLists[i].goods_price,
              money:parseInt(shopLists[i].nums)*parseInt(shopLists[i].nums)
            })
          }
        }
      }
    },
    goBack(){
      this.$router.go(-1)
    },
    pay(){
      if(this.selectRow.length>0){
        let obj = {
          user_id:window.localStorage.userId,
          info:"",
          ids:[],
          payment_type:"1",
          names:"",
          money:0,
        },goodsInfo=[]
        for(let i in this.tableData){
          goodsInfo.push({
            shopId:new String(this.tableData[i].shopId),
            nums:new String(this.tableData[i].num)
          })
          obj.ids.push(this.tableData[i].carId)
          if(i == length-1){
            obj.names += this.tableData[i].name
          }else{
            obj.names += this.tableData[i].name + "，"
          }
          obj.money += (parseInt(this.tableData[i].price)*parseInt(this.tableData[i].num))
        }
        obj.ids = obj.ids.join()
        obj.info = JSON.stringify(goodsInfo)
        if(this.$route.query.action=='1'){
          obj.goBuy = 'yes'
        }
        this.intefaces(obj)
      }else{
        this.utils.tips.error("请选择一个地址")
      }
    },
    intefaces(val){
      payMoney(val).then(response=>{
        if(response.data.state){
          this.utils.tips.success("付款成功后后自动跳转到首页，请稍等！")
          setTimeout(() => {
            const div = document.createElement('div');
            div.innerHTML=response.data.data; // data就是接口返回的form 表单字符串
            document.body.appendChild(div);
            document.forms[0].submit();
            window.open('','_parent')
          }, 1000);
        }
      })
    },
  },
}
</script>

<style lang="less">
.shoppingConfirm{
  margin-bottom: 100px;
  @import "~@/less/banner.less";
  .confirm{
    margin-top: 20px;
  }
  .buy{
    float: right;
    margin-top: 20px;
    div{
      margin-right: 20px;
      line-height: 50px;
      float: right;
    }
    .toPay{
      cursor: pointer;
      text-align: center;
      display: block;
      width: 152px;
      height: 50px;
      color: white;
      background-color: #f13e3a;
      overflow: hidden;
    }
  }
}
</style>